<template>
	<view class="order-container c-container payment-container">
		<navigator class="fixed-right" v-if='order_id' :url="'/pages/order/detail/detail?order_id='+order_id">
			<text>查看定单详情</text>
		</navigator>
		<view class="c-row-box">
			<view class="c-row-head"><view class="c-row-title">付款信息</view></view>
			<view class="c-row-item">
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">
							<text style="color: red;">*</text>
							付款公司
						</view>
						<view class="col-text">
							<picker mode="selector" :range="companyList" range-key="title" @change="companyChange" :disabled="isPreview">
								<view>{{ payment.company_text == '' ? '请选择' : payment.company_text }}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">
							<text style="color: red;">*</text>
							付款性质
						</view>
						<view class="col-text">
							<picker mode="selector" :range="natureList" range-key="title" @change="paymentTypeChange" :disabled="isPreview">
								<view>{{ payment.pay_type_text }}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">
							<text style="color: red;">*</text>
							申请时间
						</view>
						<view class="col-text">
							<view>{{ payment.apply_pay_date }}</view>
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">
							<text style="color: red;">*</text>
							付款金额
						</view>
						<view class="col-text"><input type="digit" v-model="payment.pay_item_price" :disabled="isPreview" placeholder="请输入" /></view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">
							<text style="color: red;">*</text>
							收款酒店
						</view>
						<view class="col-text">
							<view><input type="text" v-model="payment.pay_to_company" :disabled="isPreview" placeholder="请输入" /></view>
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">
							<text style="color: red;">*</text>
							收款账号
						</view>
						<view class="col-text">
							<view><input type="text" v-model="payment.pay_to_account" :disabled="isPreview" placeholder="请输入" /></view>
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">
							<text style="color: red;">*</text>
							开户行
						</view>
						<view class="col-text">
							<view><input type="text" v-model="payment.pay_to_bank" :disabled="isPreview" placeholder="请输入" /></view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="c-row-box">
			<view class="c-row-head"><view class="c-row-title">备注</view></view>
			<view class="c-row-item">
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">
							<text style="color: red;">*</text>
							备注
						</view>
						<view class="col-text"><textarea v-model="orderParams.payment_remark" placeholder="请输入" :disabled="isPreview" /></view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">
							<text style="color: red;">*</text>
							收据图片
						</view>
						<view class="col-images">
							<view class="addPic image-item" v-for="(item, index) in orderParams.receipt_img" :key="index">
								<image :src="item" mode="widthFix" @click="picture.preViewImage(orderParams.receipt_img)"></image>
								<uni-icons
									@click="picture.deleteImage(index, 'orderParams.receipt_img', _self)"
									type="minus-filled"
									size="10"
									color="red"
									style="position: absolute;right:0;top: -16upx;"
									v-if="!isPreview"
								></uni-icons>
							</view>
							<view class="addPic image-item" @click="picture.chooseImage('orderParams.receipt_img', _self)" v-if="!isPreview"><image src="@/static/add.png"></image></view>
						</view>
					</view>
				</view>
				<view class="c-row c-row-list">
					<view class="c-row-col c-row-col-list-item">
						<view class="col-title">
							<text style="color: red;">*</text>
							小票图片
						</view>
						<view class="col-images">
							<view class="addPic image-item" v-for="(item, index) in orderParams.note_img" :key="index">
								<image :src="item" mode="widthFix" @click="picture.preViewImage(orderParams.note_img)"></image>
								<uni-icons
									@click="picture.deleteImage(index, 'orderParams.note_img', _self)"
									type="minus-filled"
									size="10"
									color="red"
									style="position: absolute;right:0;top: -16upx;"
									v-if="!isPreview"
								></uni-icons>
							</view>
							<view class="addPic image-item" @click="picture.chooseImage('orderParams.note_img', _self)" v-if="!isPreview"><image src="@/static/add.png"></image></view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部栏-创建 -->
		<view class="footer-box" v-if="confirm_id == 0">
			<view class="footer-action-btn"><button size="mini" @click="saveFn">提交</button></view>
		</view>

		<!-- 新版审批流程————创建  -->
		<template v-if="sequenceData.length > 0">
			<steps-create :stepList="sequenceData"></steps-create>
		</template>
		
		<!-- 老版审核流程 -->
		<template v-if="confirmList.length > 0">
			<auditProcess
				:value="confirmList"
				:btnValue="buttons"
				:isShowBtn="options.api ? false : true"
				:transferForm="transferForm"
				@clearTransferForm="clearTransferForm"
				@resubmit="resubmits"
			></auditProcess>
		</template>
		
		<!-- 新版审核流程————查看 -->
		<template v-if="confirmSteps.length > 0">
			<steps-look :stepList="confirmSteps"></steps-look>
			<footer-action-btn
				:btnValue="buttons"
				:transferForm="transferForm"
				@clearTransferForm="clearTransferForm"
				:isShowBtn="options.api ? false : true"
				@resubmit="resubmits"
				@transferSubmit="transferSubmit"
			></footer-action-btn>
		</template>
	</view>
</template>

<script>
	
import divider from '@/component/divider/divider.vue';
import stepsLook from '@/component/steps-look/steps-look.vue'; // 新版审核流程
import footerActionBtn from '@/component/footer-action-btn/footer-action-btn.vue'; // 底部操作按钮组
import stepsCreate from '@/component/steps-create/steps-create.vue';
import picture from '@/utils/picture.js';
import request from '@/utils/request.js';
import auditProcess from '@/component/auditProcess.vue';

var parent = null;
export default {
	components: {
		divider,
		stepsCreate,
		stepsLook,
		footerActionBtn,
		auditProcess
	},
	data() {
		const currentDate = this.getDate({
			format: true
		});
		
		return {
			confirm_id: 0,
			order_id: 0,

			isPreview: false,
			natureList: [],
			options: '',
			payment: {
				company_text: '',
				company_id: 0,
				pay_type_text: '请选择',
				pay_type: '',
				apply_pay_date: currentDate,
				pay_item_price: 0,
				pay_to_company: '', //收款酒店
				pay_to_account: '', //收款账号
				pay_to_bank: '' //收款银行
			},

			orderParams: {
				payment_remark: '',
				receipt_img: [],
				note_img: []
			},

			companyList: [],
			confirmList: [],
			buttons: [],
			confirm: {}, //审批信息

			transferForm: {
				realname: '',
				user_id: ''
			},
			sequenceData: [], // 新版审核
			confirmSteps: [] // 新版审核
		};
	},
	mounted() {
		this.picture = picture;
	},
	onLoad(options) {
		this.companyList = uni.getStorageSync('allPicker').companyList;
		this.natureList = uni.getStorageSync('allPicker').exchangeTypeList;
		
		// 添加 从订单详情页添加子项目 包含order_id
		if (options.params) {
			this.options = JSON.parse(options.params);
			this.order_id = this.options.order_id;
			this.getData(this.options); //获取picker
		}

		// 审核查看 lookApproval是个对象，包含的id是审核的编号，order_id要从审核详情中获取
		if (options.lookApproval) {
			this.options = JSON.parse(options.lookApproval);
			//查看信息
			this.getDetail(this.options);
			this.confirm_id = this.options.id;
			this.isPreview = true;
			// 审核流程--查看
			this.getConfirmList();
		}

		// 查看 从查看订单审核中进入只有id，这个id是审核的编号，order_id要从审核详情中获取
		if (options.id) {
			this.options = options;
			//查看信息
			this.getDetail(this.options);
			this.confirm_id = this.options.id;
			this.isPreview = true;
			// 审核流程--查看
			this.getConfirmList();
		}
	},
	methods: {
		// 公司变化
		companyChange(e) {
			let index = e.target.value;
			this.payment.company_text = this.companyList[index].title;
			this.payment.company_id = this.companyList[index].id;
			this.getConfirmSequence();
		},

		// 时间选择
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 2;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},

		paymentTypeChange(e) {
			let index = e.target.value;
			this.payment.pay_type_text = this.natureList[index].title;
			this.payment.pay_type = this.natureList[index].id;
		},

		//获取查看信息
		getDetail(e) {
			let that = this;
			let data;
			if (e.is_comment) {
				data = {
					id: e.id,
					is_comment: e.is_comment,
					type: e.user ? 'confirm_user' : ''
				};
			} else {
				data = {
					id: e.id,
					type: e.user ? 'confirm_user' : ''
				};
			}
			request.request({
				url: '/h5/order.confirm/detail',
				showLoading: true,
				token: true,
				data: data,
				success(res) {
					if (res.code == 200) {
						that.payment = res.data.detail.payment;
						that.orderParams = res.data.detail.payment;
						that.confirmList = res.data.confirmList;
						that.confirm = res.data.confirm; //代表的是当前审核的信息
						that.order_id = that.confirm.order_id;
						that.buttons = res.data.buttons;
						//判断是否可以编辑
						that.buttons.map((item, index) => {
							if (item.id == 'update') {
								that.isPreview = false;
							}
						});
						that.incomeTypeList = res.data.incomeTypeList; //付款性质
						that.incomeTypeList.map((item, index) => {
							if (that.payment.pay_type == item.id) {
								that.payment.pay_type_text = item.title;
							}
						});
						that.companyList.map((item, index) => {
							if (item.id == that.payment.company_id) {
								that.payment.company_text = item.title;
								that.payment.company_id = item.id;
							}
						});
					}
				},
				fail(e) {
					uni.showToast({
						icon: 'none',
						title: '服务器开小差去啦~'
					});
				}
			});
		},

		// 提交转交
		transferSubmit() {
			let that = this;
			request.request({
				url: '/api/order.audit/transfer',
				showLoading: true,
				token: true,
				data: {
					id: that.confirm_id,
					user_id: that.transferForm.user_id
				},
				success(res) {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
						uni.navigateBack({});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}
			});
		},
		// 点击取消时清除转交人员信息
		clearTransferForm() {
			this.transferForm = {
				realname: '',
				user_id: ''
			};
		},

		//查看详情审核流程
		getConfirmList() {
			let that = this;
			request.request({
				url: '/api/order.audit/getAuditResult',
				showLoading: true,
				token: true,
				data: {
					id: that.confirm_id
				},
				success(res) {
					that.confirmSteps = res.data.process;
				}
			});
		},
		
		//创建订单时的审核流程
		getConfirmSequence(e) {
			let that = this;
			request.request({
				url: '/api/order.audit/getAuditProcess',
				showLoading: true,
				token: true,
				data: Object.assign(
					{
						order_id: that.order_id
					},
					{
						audit_type: 'payment'
					},
					{
						company_id: that.payment.company_id
					}
				),
				success(res) {
					if (res.code == 200) {
						that.sequenceData = res.data.process;
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}
			});
		},

		getData(e) {
			let that = this;
			request.request({
				url: e.read,
				showLoading: true,
				token: true,
				data: {
					order_id: e.order_id
				},
				success(res) {
					if (res.code == 200) {
						if (res.data.hotel) {
							that.payment.pay_to_company = res.data.hotel.bank_company;
							that.payment.pay_to_account = res.data.hotel.bank_account;
							that.payment.pay_to_bank = res.data.hotel.bank_name; //收款酒店
						}
					}
				},
				fail(e) {
					uni.showToast({
						icon: 'none',
						title: '服务器开小差去啦~'
					});
				}
			});
		},

		//校验
		verify() {
			let bool = true;
			//付款公司
			if (this.payment.company_text === '') {
				uni.showToast({
					icon: 'none',
					title: '请选择付款公司'
				});
				bool = false;
				return false;
			}
			//付款性质
			if (this.payment.pay_type_text === '') {
				uni.showToast({
					icon: 'none',
					title: '请选择付款性质'
				});
				bool = false;
				return false;
			}
			//付款金额
			if (this.payment.pay_item_price === '') {
				uni.showToast({
					icon: 'none',
					title: '请填写付款金额'
				});
				bool = false;
				return false;
			}
			//酒店账户全称
			if (this.payment.pay_to_company === '') {
				uni.showToast({
					icon: 'none',
					title: '请填写酒店账户全称'
				});
				bool = false;
				return false;
			}
			//收款账号
			if (this.payment.pay_to_account === '') {
				uni.showToast({
					icon: 'none',
					title: '请填写收款账号'
				});
				bool = false;
				return false;
			}
			//开户行
			if (this.payment.pay_to_bank === '') {
				uni.showToast({
					icon: 'none',
					title: '请填写开户行'
				});
				bool = false;
				return false;
			}
			return bool;
		},
		//提交审核
		saveFn() {
			// if (!this.verify()) return;
			let that = this;
			let params = {};
			params['is_new'] = 1;
			params['order_id'] = that.order_id;
			params['payment'] = Object.assign(that.payment, that.orderParams);
			
			// console.log(params);
			// return false;
			request.request({
				url: that.options.api,
				showLoading: true,
				token: true,
				data: params,
				success(res) {
					if (res.code == 200) {
						uni.redirectTo({
							url: '/pages/order/index'
						});
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}
			});
		},
		// 编辑提交
		editFn(api, id) {
			let that = this;
			let params = {};
			params['is_new'] = 1;
			params['order_confirm_id'] = that.confirm_id;
			params['payment'] = Object.assign(that.payment, that.orderParams);
			request.request({
				url: api,
				showLoading: true,
				token: true,
				data: params,
				success(res) {
					if (res.code == 200) {
						uni.redirectTo({
							url: '/pages/order/index'
						});
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}
			});
		},
		//底部评论按钮
		resubmits(item) {
			if (item.label == '同意' || item.label == '拒绝' || item.label == '评论') {
				this.commentFn(item);
			} else if (item.label == '转交') {
				uni.navigateTo({
					url: '../../../component/search/search?type=changeUser'
				});
			} else {
				this.editFn(item.api, item.id);
			}
		},
		// 编辑提交
		commentFn(e) {
			let that = this;
			let url = '';
			if (e.label == '拒绝' && that.confirmList.length == 0) {
				url = '/api/order.audit/reject';
			} else if (e.label == '同意' && that.confirmList.length == 0) {
				url = '/api/order.audit/accept';
			} else {
				url = e.api;
			}
			request.request({
				url: url,
				showLoading: true,
				token: true,
				data: {
					id: that.confirm_id,
					content: e.content ? e.content : '',
					image: e.image ? e.image : ''
				},
				success(res) {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
						that.getDetail(that.options);
						that.getConfirmList();
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="less">
uni-page-body {
	padding-top: 0;
}

@import url('../../order/createOrder/components/common.less');
@import url('../../order/components/common.less');

.payment-container {
	padding-bottom: 120upx;

	.addPic {
		position: relative;
		overflow: hidden;
		width: 68upx;
		height: 68upx;
		border: 1px solid #cccccc;
		margin-left: 20upx;

		image {
			width: 68upx;
			height: 68upx;
			margin-right: 37upx;
		}
	}

	.footer-box {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0 16px;
		display: flex;
		align-items: center;
		height: 100upx;
		font-size: 28upx;
		background-color: #ffffff;
		border-top: 1px solid #dedede;
		z-index: 9;

		.footer-title {
			flex: 0 15%;
		}

		.footer-action-btn {
			flex: 1;
			text-align: end;

			button {
				background-color: #007aff;
				color: #ffffff;
			}

			button + button {
				margin-left: 5px;
			}
		}
	}
}
</style>
